 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name">基本信息</div>
      </div>
      <div class="content-con margin">
        <div class="bank-form">
          <div class="form-item">
            <Row :gutter="16">
              <i-col span="12"
              v-for="(basic,index) in basicData"
              :key='basic.id'
              style="padding-top: 15px;">
                <Row v-if="index == 2">
                  <i-col span="8" class="ban-left">
                    {{basic.title}}
                  </i-col>
                  <i-col span="16">
                    <Radio-group v-model="basic.statu" style="padding: 8px 0 0 12px;">
                      <Radio size="large" label="start" disabled>启用</Radio>
                      <Radio size="large" label="stop" disabled>停止</Radio>
                    </Radio-group>
                  </i-col>
                </Row>
                <Row v-else>
                  <i-col span="8" class="ban-left">
                    {{basic.title}}
                  </i-col>
                  <i-col span="16">
                    <i-input :value.sync="basic.value" size="large" readonly></i-input>
                  </i-col>
                </Row>
              </i-col>
            </Row>
          </div>
        </div>
      </div>
      <div class="card-name">
        <div class="name">开户信息</div>
      </div>
      <div class="content-con margin">
        <div class="bank-form">
          <div class="form-item">
            <Row :gutter="16">
              <i-col span="12"
              v-for="(open,index) in openData"
              :key='open.id'
              style="padding-top: 15px;">
                <Row>
                  <i-col span="8" class="ban-left">
                    {{open.title}}
                  </i-col>
                  <i-col span="16">
                    <i-input :value.sync="open.value" size="large" readonly></i-input>
                  </i-col>
                </Row>
              </i-col>
            </Row>
          </div>
        </div>
      </div>
      <div class="card-name">
        <div class="name">账户信息</div>
      </div>
      <div class="content-con">
        <div class="bank-form">
          <div class="form-item">
            <Row :gutter="16">
              <i-col span="12"
              v-for="(account,index) in accountData"
              :key='account.id'
              style="padding-top: 15px;">
                <Row v-if="index == 3">
                  <i-col span="8" class="ban-left1"></i-col>
                  <i-col span="16"></i-col>
                </Row>
                <Row v-else>
                  <i-col span="8" class="ban-left">
                    {{account.title}}
                  </i-col>
                  <i-col span="16">
                    <i-input :value.sync="account.value" size="large" readonly></i-input>
                  </i-col>
                </Row>
              </i-col>
            </Row>
          </div>
        </div>
        <div class="ban-btn">
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </div>
      </div>
   </Card>

 </template>
 <script>
 import axios from "../../libs/axios.js";
 export default {
   name: 'mer-view',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       //基本信息
       basicData:[
         {
           title: '商户ID',
           value: '20000036'
         },
         {
           title: '商户名称',
           value: '123'
         },
         {
           title: '商户状态',
           statu: 'start'
         },
         {
           title: '所属代理商ID',
           value: ''
         },
         {
           title: '用户登录名',
           value: 'qwe'
         },
         {
           title: '真实姓名',
           value: 'dfgf'
         },
         {
           title: '身份证号',
           value: ''
         },
         {
           title: '手机号',
           value: ''
         },
         {
           title: 'QQ号',
           value: ''
         },
         {
           title: '邮箱',
           value: ''
         },
         {
           title: '网站名称',
           value: ''
         },
         {
           title: '网站地址',
           value: ''
         },
         {
           title: '通讯地址',
           value: ''
         },
         {
           title: '唯一标识',
           value: ''
         },
         {
           title: '线下充值费率(%)',
           value: '0'
         },
         {
           title: '创建时间',
           value: '2020-10-12 00:50:57'
         }
       ],
       openData:[
         {
           title: '开户行名称',
           value: ''
         },
         {
           title: '开户网点名称',
           value: ''
         },
         {
           title: '账户名',
           value: ''
         },
         {
           title: '账户号',
           value: ''
         },
         {
           title: '开户所在省',
           value: ''
         },
         {
           title: '开户所在市',
           value: ''
         }
       ],
       accountData:[
         {
           title: '账户余额(元)',
           value: '0'
         },
         {
           title: '不可用余额(元)',
           value: '0'
         },
         {
           title: '可结算金额(元)',
           value: '0'
         },
         {
           title: '',
           value: ''
         },
         {
           title: '保证金(元)',
           value: '0'
         },
         {
           title: '冻结金额(元)',
           value: '0'
         },
         {
           title: '代付余额(元)',
           value: '7991.94'
         },
         {
           title: '不可用代付余额(元)',
           value: '4626.2'
         }
       ]
     };
   },
   methods: {
     // 返回按钮
     btnClick1(){
       this.$router.push({name:'merchants'})
     }
   }
 };
 </script>
 <style lang="less">
   .card-name{
       height: 42px;
       border-bottom: 1px solid #f6f6f6;
         .name{
           margin: 0 15px;
           padding: 0;
           width: 65px;
           text-align: center;
           line-height: 42px;
           border-bottom: 2px solid #5FB878;
         }
     }
     .ivu-input{
       border-radius: 0 2px 2px 0;
     }
     .margin{
       margin-bottom: 20px !important;
     }
     .content-con{
       margin: 15px 15px 0px 15px;
       .bank-form{
         .form-item{
           .ban-left{
             padding: 8px 15px;
             height: 36px;
             line-height: 20px;
             border-width: 1px;
             border-style: solid;
             border-radius: 2px 0 0 2px;
             text-align: center;
             background-color: #FBFBFB;
             border: 1px solid #dcdee2;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
             box-sizing: border-box;
            }
           .ban-left1{
             padding: 8px 15px;
             height: 36px;
             line-height: 20px;
            }
          }
        }
        .ban-btn{
          padding:18px 0px 12px 110px;
          .save{
            background-color: rgb(0, 150, 136);
            color: white;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            margin-right: 15px;
          }
        }
       .page{
         position: relative;
         width: 100%;
         padding: 7px 7px 0;
         height: 41px;
         font-size: 12px;
         // overflow: hidden;
         border-bottom: 1px solid #dcdee2;
         border-left: 1px solid #dcdee2;
         border-right: 1px solid #dcdee2;
       }
     }
 </style>
